<template>
    <div class="wrap"> 
    	
	<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
	  <van-list
	    v-model="loading"
	    :finished="finished"
	    :finished-text="finishedText"
	    @load="onLoad"
	    :immediate-check="false"
	  >
	      <div class="item_wrap">	
		      <div class="item" v-for="item in list">          	
		      	 <div class="a">
		            <div class="a1">
		            	<img :src="item.avatar" alt="" class="author" v-if="item.avatar"/>
		            	<img src="../../../../static/img/lanhu/45.png" alt="" class="author" v-else/>
		            	<span class="a11">{{item.nickName}}</span>
		            </div>
		            <div class="a2">
		            	<span>{{formatOrderStatus(item.ordersState)}}</span>
		            </div>
		      	 </div>          	 
		      	 <div class="b">
		      	 	<div class="b1">
		      	 		<div class="b1_1 imgWrap" :style="{backgroundImage: 'url(' + item.goodsImage + ')'}">
		      	 			
		      	 		</div>
		      	 		<div class="b1_2">{{item.comName}}</div>
		      	 	</div>
		      	 	<div class="b2">
		      	 		<span class="b2_1">实付款</span>
		      	 		<span class="b2_2">&yen;</span>
		      	 		<span class="b2_3">{{formatPrice(item.goodsIsprice)}}</span>
		      	 	</div>
		      	 </div>
		      	 
		      	 
		      	 
		      	 
		      	 
		      	 <div class="e">
		             <div>
		             	<van-icon name="chat-o" size='20' class="icon"/>
		             	<span @click=""> 联系卖家</span>
		             </div>	 
		             
		             
		             <!--已评价且本人未评价-->
		             <div class="d" v-if="item.ordersState==6&&item.commentCount==0">
		             	<van-button plain  size="small" class="d_btn" @click="lookEvaluate(item.ordersId,item.goodsId)">评价</van-button>
		             	<span class="d_btn2" @click="showPopup(item.ordersState,item.goodsId,item.commentCount)">...</span>
		             </div>
		             
		             <!--已评价且本人已评价-->
		             <div class="d" v-if="item.ordersState==6&&item.commentCount>0">
		             	<van-button plain  size="small" class="d_btn" @click="lookEvaluate(item.ordersId,item.goodsId)">查看评价</van-button>
		             	<span class="d_btn2" @click="showPopup(item.ordersState,item.goodsId,item.commentCount)">...</span>
		             </div>				             
		             
		             <!--交易成功-->
		             <div class="d" v-if="item.ordersState==4">
		             	<van-button plain  size="small" class="d_btn" @click="evaluate(item.ordersId,item.goodsId)">评价</van-button>
		             	<span class="d_btn2" @click="showPopup(item.ordersState,item.goodsId,item.commentCount)">...</span>
		             </div>				             
		             
		             <!--退款成功-->
		             <div class="d" v-if="item.ordersState==8">
		             	<van-button plain  size="small" class="d_btn" @click="buy(item.ordersId,item.goodsId)">查看钱款</van-button>
		             	<span class="d_btn2" @click="showPopup(item.ordersState,item.goodsId)">...</span>
		             </div>			
		             
		             <!--其他负面状态-->
		             <div class="d" v-if="item.ordersState==0||item.ordersState==9||item.ordersState==10">
		             	<van-button plain  size="small" class="d_btn" @click="buy(item.ordersId,item.goodsId)">删除订单</van-button>		    
		             </div>			             
		             
		      	 </div>             
		      </div>
	
	      </div> 
      	    
	  </van-list>
	</van-pull-refresh>    	
      <van-popup v-model="show">
      	 <div class="show">
      	 	<div class="show_ul">
      	 		<div class="show_li" v-for="item in ul" v-if="item.isShow" @click="fun(item.type)">
      	 			{{item.title}}
      	 		</div>
      	 	</div>
      	 </div>
      </van-popup>
      
      
	  <van-popup
		  v-model="showCancel"
		  round 
		  position="bottom"
		  :style="{ height: '70%' }"
	  > 
	    <div class="cancelWrap">
		    <div class="cancel1">选择取消订单原因</div>
		    <div class="cancel2">				
				<van-radio-group v-model="cancelRadio">
				  <van-cell-group>
				    <van-cell title="我不想买了" clickable>
				      <van-radio slot="right-icon" checked-color="#07c160" name="1" />
				    </van-cell>
				    <van-cell title="信息填写错误，重新拍" clickable >
				      <van-radio slot="right-icon" checked-color="#07c160" name="2" />
				    </van-cell>
				    <van-cell title="卖家缺货" clickable >
				      <van-radio slot="right-icon" checked-color="#07c160" name="3" />
				    </van-cell>
				    <van-cell title="同城见面交易" clickable >
				      <van-radio slot="right-icon" checked-color="#07c160" name="4" />
				    </van-cell>
				    <van-cell title="其他原因" clickable >
				      <van-radio slot="right-icon" checked-color="#07c160" name="5" />
				    </van-cell>				    
				  </van-cell-group>
				</van-radio-group>
		    </div>
		    <div class="cancel3">
		    	<div><van-button round  plain  class="c3_btn" @click="noCancel">暂不取消</van-button></div>
		    	<div><van-button round  class="c3_btn c3_btn2" @click="query">取消订单</van-button></div>
		    </div>
	    </div>
	  </van-popup>
    </div>
	  	
</template>

<script>
import {getFun,getSellUl} from '@/api/publicFun.js'	 
let publicFun=getFun()	
let ul=getSellUl()
export default {	
	data() {
       return {
       	  cancelRadio:'0', // 默认取消订单的原因（不选择任何一个原因）
       	  showCancel:false, // 显示取消订单弹出层
       	  show:false,       // ...弹层 
          userId:0,         // 当前登录人的Id
          url1:this.$api+'/marketorderservice/api/v1/market/findSellList', // 我买到的列表接口
          ul:[],            // ...弹层选项（订单状态不同，显示也不同） 
          pageNum:1,        // 页码参数
          list:[],          // 数据
	      loading: false,    
	      finished: false,  
	      refreshing: false, // 是否处于下拉刷新状态         
	      pages:0,
	      comId:0,          // 记录当前订单的comId
	      finishedText:''
       }
	},
	methods: {	
       getData(){
   	     let that=this
    	 that.$Axios.postRequest(that.url1,{userId:that.userId},{"pageNum":that.pageNum,pageSize:'5'})
    	 .then(function(result){
    	 	 that.pages=result.data.page.pages
    	 	 that.list=that.list.concat(result.data.page.records) 	
    	 })       	
       },
	   onRefresh() {
		  setTimeout(() => {
	          this.pageNum=1
	          this.list=[]
	          this.getData()	
	          this.finished = false;
	          this.loading=false
			  this.refreshing = false;
		  }, 1000);          
	   },   
	   onLoad(){
		 setTimeout(() => {		 	
	        if (this.refreshing) {
	          this.list = [];
	          this.refreshing = false;
	        }	        
	        this.pageNum++
	        if(this.pageNum>this.pages){this.finished = true;}
	        else{
              this.getData()
	          this.loading = false;	  
	          this.finishedText="我也是有底线的"
	        }
	      }, 1000);   	
	   },
       formatWord(status,commentCount){
       	let str=''
       	switch(status) {
	     case 0:
	        str='交易关闭'
	        break;       		
	     case 4:
	        str='交易完成'
	        break;
	     case 6:	       
	        str="交易完成"
	        break;   
	     case 8:
	        str='退款完成'
	        break;
	     case 9:
	        str='交易关闭'
	        break;	  
	     case 10:
	        str='交易关闭'
	        break;	        
        } 
        return str
       },
       formatPrice(str){
       	 str=str.toFixed(2)
       	 return str
       },
       lookEvaluate(ordersId,goodsId){
		 let arg='[{"ordersId":"'+ordersId+'"},{"comId":"'+goodsId+'"}]'
	   	 this.link('/market/order/lookEvaluate',arg)	       	
       },
       // 去评价
       evaluate(ordersId,goodsId){
		 let arg='[{"ordersId":"'+ordersId+'"},{"comId":"'+goodsId+'"}]'
	   	 this.link('/market/order/evaluate',arg)	       	 
       },
       showPopup(status,comId,commentCount){
       	// 判断订单状态
       	this.comId=comId
       	if(status==4&&commentCount==0){
       		this.ul=ul[0]
       	}else if(status==4&&commentCount>0){
       		this.ul=ul[1]
       	}else if(status==8){
       		this.ul=ul[2]
       	}
       	this.show=true
       },
       fun(type){       	 
       	 if(type==3){
       	 	this.show=false
       	 	this.showCancel=true
       	 }else if(type==4){
       	 	
			 let arg='[{"comId":"'+this.comId+'"}]'
		   	 this.link('/market/goods/snapshot',arg)	        	 	
       	 }
       },
       noCancel(){
       	 this.cancelRadio='0'
       	 this.showCancel=false   
       },
       query(){
       	 if(this.cancelRadio=='0'){
       	 	 this.$toast('请选择取消订单原因');
       	 }else{
       	 	
       	 }       	 
       }
	},
	mixins:[publicFun],//混入	
	mounted() {
	   this.userId=this.$router.currentRoute.query.userId;	
	   this.getData()	
	}
}	
</script>

<style scoped="" lang="scss">
.imgWrap{width: 92px;height: 92px;overflow: hidden;background-repeat: no-repeat;background-size:cover;background-position: 50% 50%;border-radius: 4px;}

.wrap{background: #f5f5f5;padding: 15px 15px 15px;}
.item{background: #fff;margin-bottom: 10px;border-radius: 6px;padding: 15px 10px;}
.a{display: flex;justify-content: space-between;align-items: center;}
.a1{width: 65%;display: flex;align-items: center;}
.a2{color: $common-font2;}
.a11{margin-left:10px;}
.author{width:24px;height: 24px;display: block;border-radius: 50%;}

.b{padding:15px 0;border-bottom: 1px solid #f9f9f9;}

.b1{display: flex;}
.b1_1{width: 80px;height: 80px;border-radius: 6px;}
.b1_2{margin-left: 10px;font-size: 16px;flex: 1;}

.b2{text-align: right;margin-top: 4px;}
.b2_1{margin-right: 2px;}
.b2_2{font-size: 12px;}
.b2_3{color: $common-font2;font-weight: bold;margin-left: 2px;}
.e{padding: 10px 0px 0;display: flex;justify-content: space-between;align-items: center;}
.icon{vertical-align: -5px;}
.c{color: #999}
.d{display: flex;}
.d_btn{border-color: #d9d9d9;border-radius: 20px;padding: 0 12px;}
.d_btn2{width: 30px;height: 30px;border:1px solid #d9d9d9;margin-left: 10px;
border-radius: 50%;display: flex;align-items: center;justify-content: center;}
.van-popup--center{border-radius: 4px;}
.show{width: 300px;background: #fff;padding: 20px 0;}
.show_li{margin-bottom: 20px;font-size: 16px;padding-left: 20px;}
.show_li:nth-last-child(1){margin-bottom: 0;}

.van-cell{padding-top:12px;padding-bottom: 12px;}
.cancelWrap{padding: 0 10px;width: 100%;height: 100%;}
.cancel1{height: 15%;display: flex;justify-content: center;align-items: center;font-weight: bold;font-size: 20px;}
.cancel2{height: 70%;}
.cancel3{height: 15%;display: flex;justify-content: space-between;}
.cancel3>div{width: 49%;}
.c3_btn{width: 100%;font-weight: bold}
.c3_btn2{background: $common-color1;border: none;}
</style>